<template>
  <div v-if="history_list.length != 0">
    <div class="search_history" >
      搜索历史
      <span><van-icon name="cross" @click="clearHistory" /></span>
    </div>
    <div class="history_box">
      <div v-for="(item,index) in history_list" :key='index'>
        <span @click="changeSearchVal(item)">{{item}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
  },
  data(){
    return{
      history_list:[]
    }
  },
  created(){
    this.history_list = this.$store.state.history_list
  },
  methods:{
    changeSearchVal(val){
      this.$parent.childMethod(val)
    },
    clearHistory(){
      this.$store.state.history_list = []
      this.history_list = []
    },
    loopList(val){
      let new_list = []
      this.$store.state.history_list.forEach(item => {
        if(item.indexOf(val) != -1){
          new_list.push(item)
        }
      });
      this.history_list = new_list
    }
  },
  watch:{
  }
}
</script>

<style lang="less" scoped>
.search_history{
  line-height: 25px;
  height: 25px;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 14px;
  background: #F8F8F8;
  color:#B5B5B5;
  border-bottom: 1px solid #E9E9E9;
  .van-icon{
    float: right;
    font-size: 18px;
    line-height: 25px;
  }
}
.history_box{
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  padding: 0 20px 0 20px;
  div{
    width:auto;
    margin-right: 20px;
    line-height: 25px;
    color:#3396FB;
    font-size: 13px;
  }
}
</style>